<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>Scriptable开发引导</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body {
        background-color: #eee;
      }
      #page {
        width: 100vw;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex-direction: column;
      }
      .button {
        width: 85vw;
        background-color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        padding: 15px;
        border-radius: 8px;
        font-size: 15px;
        color: #777;
        border: 1px solid #ddd;
        margin-top: 15px;
      }
      .button:active {
        background-color: #333;
      }
      textarea {
        border: none;
        overflow: auto;
        outline: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        resize: none;
      }
      .code-output {
        background-color: #fff;
        width: 85vw;
        margin-top: 15px;
        height: 50vh;
        border: 1px solid #ddd;
        border-radius: 15px;
        box-sizing: border-box;
        padding: 15px;
        color: #777;
      }
    </style>
  </head>
  <body>
    <div id="page" ontouchstart="">
      <div class="button" onclick="copyCode()">1、点击复制下方的代码</div>
      <div class="button" onclick="openScriptable()">2、点击打开 Scriptable 粘贴运行</div>
      <textarea class="code-output" readonly>@@code@@</textarea>
    </div>

    <script>
      window.onload = () => {
        if (isWeChat()) {
          toast('请在 safari 浏览器打开此页', 5000)
        }
      }

      // 复制代码
      function copyCode() {
        document.querySelector('.code-output').select()
        document.execCommand('Copy')
        toast('复制成功，请点击第二步')
      }

      // 打开 scriptable 并创建
      function openScriptable() {
        if (isWeChat()) {
          toast('请在 safari 浏览器打开此页')
        }
        location.href = 'scriptable:///add'
      }

      // 吐司
      function toast(msg, timeout = 2000) {
        const toastElm = document.createElement('div')
        Object.assign(toastElm.style, {
          position: 'fixed',
          bottom: '10vh',
          zIndex: 999,
          width: '100vw',
          display: 'flex',
          justifyContent: 'center',
        })
        toastElm.innerHTML = `
          <div style="
          padding: 15px;
          border-radius: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          font-size: 16px;
          color: #777;
          text-align: center;
          background-color: #fff;
          font-weight: bold;">${msg}</div>
        `
        document.body.appendChild(toastElm)
        setTimeout(() => {
          document.body.removeChild(toastElm)
        }, timeout)
      }

      // 检测是否为微信打开
      function isWeChat() {
        if (navigator.userAgent.indexOf('MicroMessenger') != -1) {
          return true // 是微信端
        }
        return false
      }
    </script>
  </body>
</html>
